<template>
  <div class="self-assessment-container" :style="layoutStyle">
    <TitleB
      :title="selfAssessment.moduleTitle"
      @titleBValUpdate="onModuleTitleUpdate"
      @btnClick="onBtnClick"
      iconName="el-icon-edit-outline"
      :backgroundColor="myThemeColor"
    ></TitleB>
    <AutoTextArea
      v-for="content in selfAssessment.contentList"
      :key="content.id"
      :data="content.content"
      :backgroundColor="backgroundColor"
      @textChange="onContentChange(content.id, $event)"
    ></AutoTextArea>
  </div>
</template>

<script>
import TitleB from '@/components/base/TitleB.vue'
import AutoTextArea from '@/components/base/AutoTextArea.vue'
import { nanoid } from 'nanoid'
import { mapGetters } from 'vuex'
export default {
  name: 'SelfAssessment',
  data() {
    return {
      id: '',
      selfAssessment: {
        moduleTitle: '',
        contentList: [],
      },
    }
  },
  props: {
    layoutType: {
      type: String,
      default: '',
    },
    selfAssessmentProps: {
      type: Object,
      default: function () {
        return {
          moduleTitle: '自我评价',
          contentList: [
            {
              id: nanoid(),
              content: '篇幅不要太长，注意结合简历整体的美观度。。。',
            },
          ],
        }
      },
    },
    moduleId: {
      type: String,
      default: nanoid(),
    },
  },
  created() {
    this.selfAssessment = { ...this.selfAssessmentProps }
    this.id = this.moduleId
  },
  computed: {
    layoutStyle() {
      return this.layoutType === 'left'
        ? {
            padding: 0,
          }
        : ''
    },
    backgroundColor() {
      return this.layoutType === 'left' ? '#062743' : 'white'
    },
    ...mapGetters(['myThemeColor'])
  },
  methods: {
    onModuleTitleUpdate(newTitle) {
      this.selfAssessment.moduleTitle = newTitle
      this.updateStore()
    },
    onBtnClick(tag) {
      switch (tag) {
        case 'add':
          this.addContent()
          break
        case 'delete':
          this.delContent()
          break
        case 'remove':
          this.removeModule()
          break
      }
    },
    addContent() {
      const newSelfAss = {
        id: nanoid(),
        content: '自定义内容',
      }
      this.selfAssessment.contentList.push(newSelfAss)
      this.updateStore()
    },
    delContent() {
      if (this.selfAssessment.contentList.length <= 1) {
        this.$message.warning('至少需要一条数据')
      } else {
        this.selfAssessment.contentList.pop()
        this.updateStore()
      }
    },
    removeModule() {
      this.$store.commit('removeModule', this.id)
    },
    onContentChange(contentId, newVal) {
      this.selfAssessment.contentList.some((item) => {
        if (item.id === contentId) {
          item.content = newVal
          return
        }
      })
      this.updateStore()
    },
    updateStore() {
      const newData = { props: this.selfAssessment, id: this.id }
      this.$store.commit('setModule', newData)
    },
  },
  components: {
    TitleB,
    AutoTextArea,
  },
}
</script>

<style scoped lang="less">
.self-assessment-container {
  width: 100%;
  padding: 0 15px;
  margin-bottom: 5px;
}
</style>
